<!DOCTYPE html>
<html>
	<head>
	    <meta charset="utf-8">
	    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
	    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
	    <title>Hello APP</title>
	    <link rel="stylesheet" type="text/css" href="../../../css/index.css" />
	</head>
	<style type="text/css">
		.warp{width: 100%;}
		input::-webkit-input-placeholder{color: #999999;font-size: 14px;}
		input::-moz-placeholder{color: #999999;font-size: 14px;}

		textarea::-webkit-input-placeholder{color: #BBBBBB;font-size: 14px;}
		textarea::-moz-placeholder{color: #BBBBBB;font-size: 14px;}
		.img-box{width: 100%;height: auto;}
		.img-box img{width: 100%;display: block;}

		.info-box{width: 100%;}
		.info-box .info-one{align-items: center;height: 50px;padding: 0 15px;background: #FFFFFF;box-sizing: border-box;}
		.info-box .info-one input{text-align: right;padding: 10px 0 10px 10px;line-height: 30px;box-sizing: border-box;color: #666666}
		.info-box .info-one.goto{background: url(../../../image/main3/main3_goto.png) no-repeat right 10px center #FFFFFF;background-size:14px;padding-right: 30px;}
		.info-box .info-one .logo{width: 48px;height: 48px;margin-right: 20px;}

		.info-box .up-img{width: 100%;padding: 0 15px 10px 15px;background: #FFFFFF;margin-bottom: 10px;box-sizing: border-box;}
		.info-box .up-img .title{line-height: 50px;font-size: 14px;}
		.info-box .up-img .img-box{width: 100%;flex-wrap: wrap;}
		.info-box .up-img .img-box .img-one{width: 80px;height: 80px;background-color:#F5F6F6;margin-right: 10px;position: relative;top: 0;left: 0;}
		.info-box .up-img .img-box .img-one:nth-child(4n){margin-right: 0;}
		.info-box .up-img .img-box .img-one .del{width: 20px;height: 20px;position: absolute;top: 4px;right: 4px;background: url(../../../image/main3/del-img.png) no-repeat center;background-size:cover ;}
		.info-box .up-img .img-box .add-img{background: url(../../../image/main3/add_img.png) no-repeat center ;background-size:100%;width: 80px;height: 80px;}

		/*协议*/
		.xieyi{font-size: 13px;color:#999999;line-height: 34px;padding:0 15px ;box-sizing: border-box;align-items: center;}
		.xieyi .sel-box{width: 16px;height: 16px;background: url(../../../image/login/sel_0.png) no-repeat left center;background-size:16px;margin-right: 10px;}
		.xieyi .sel-box.on{background: url(../../../image/login/sel_1.png) no-repeat left center;background-size:16px;}
		.xieyi span{color: #333333;}

		.warp-btn{position: fixed;background:#ffffff;border-radius:4px;
		text-align: center;font-size: 18px;color: #FFFFFF;bottom: 0;left: 0;right: 0;z-index: 999;}
		.warp-btn .btn{height: 44px;background: #FF9502;line-height: 44px;color: #ffffff;border-radius: 4px;margin: 0 15px 8px 15px;}

	</style>
	<body>
		<div id="vue" class="warp">
			<div class="img-box" tapmode data-url="main3/fuwenben.html" data-type="Page/ruzhutuwen" data-title="商家入驻介绍" tapmode onclick="open_page(this)">
				<img :src="rzImg">
			</div>
			<div class="info-box">
				<div class="info-one flex goto border-bottom" style="height: 70px;padding: 10px 15px;">
	        		<div class="text flex1">请上传商家logo</div>
					<div class="logo bgpic" data-type="uplogo" style="background-image:url('../../../image/main3/add_img.png')" tapmode onclick="fnUploadPic(this)"></div>
	        	</div>
	        	<div class="info-one flex border-bottom">
	        		<div class="text">商家名称</div>
	        		<input class="flex1" type="text" maxlength="30" id="title" :value="Pdata.title" placeholder="请输入商家名称"/>
	        	</div>
				<div class="info-one flex border-bottom">
	        		<div class="text">联系人</div>
	        		<input class="flex1" type="text" maxlength="5" id="fzname" :value="Pdata.fzname" placeholder="请输入联系人"/>
	        	</div>
				<div class="info-one flex border-bottom">
	        		<div class="text">联系电话</div>
	        		<input class="flex1" type="tel" maxlength="11" id="phone" :value="Pdata.phone" placeholder="请输入联系方式"/>
	        	</div>
				<div class="info-one flex goto border-bottom" tapmode onclick="cityClick(this)">
	        		<div class="text">所在地区</div>
	        		<input class="flex1" type="text" readonly="readonly" id="citystr" :value="Pdata.citystr" placeholder="请选择"/>
	        	</div>
				<div class="info-one flex border-bottom">
	        		<div class="text">详细地址</div>
	        		<input class="flex1" type="text" maxlength="30" id="address" :value="Pdata.address" placeholder="请输入详细地址"/>
	        	</div>
				<div class="up-img">
	        		<div class="title">营业执照</div>
	        		<div class="img-box flex">
						<div class="img-one bgpic" v-if="Pdata.zhizhao_show"  :data-img="Pdata.zhizhao_show" :style="{backgroundImage:'url('+Pdata.zhizhao_show+')'}"><div class="del" tapmode onclick="delImages(this)"></div></div>
	        			<div :class="['add-img', Pdata.zhizhao_show ? 'none':'']" data-type="upzhizhao" id="addImg" tapmode onclick="fnUploadPic(this)"></div>
	        		</div>
	        	</div>
				<div class="info-one flex goto" tapmode onclick="tabWay(this)">
	        		<div class="text">选择分公司</div>
	        		<input class="flex1" type="text" readonly="readonly" id="company" placeholder="请选择（非必填）"/>
	        	</div>
	        </div>
			<div style="width:100%;height:180px;"></div>
			<div class="warp-btn" id="app-footer">
				<div class="xieyi flex">
					<div class="sel-box flex on" tapmode onclick="seLxieyi(this)"></div>
					本人同意<span data-url="main3/fuwenben.html" data-type="Page/ruzhuxieyi" data-title="入驻协议" tapmode onclick="open_page(this)">《入驻协议》</span>
				</div>
	            <div class="btn" tapmode onclick="upAllData()">确定</div>
	        </div>
		</div>
	</body>
</html>
<script type="text/javascript" src="../../../script/base.min.js" id="loadjs" data-js="L/swiper.min,L/lazyload,L/h-tool"></script>
<script type="text/javascript">

	define(function (require, exports, module) {
		lanYun.setFooter('app-footer');
		var sdata = {};
		var oosinfo = lanYun.getStorage('imageData') || null;
		var ajax = 0;
		var typeData = [];
		var Citys = null;
		sdata.company_id = 0;

		_page.getData = function(loading) {
			lanYun.getVueData({url:'UserStoreIn/index',get:{id:pageParam.id},cache:0,loading:loading},function(ret) {
				//console.log(JSON.stringify(ret))
				if(ret.rzimg){lanYun.vue.rzImg = ret.rzimg;}
				lanYun.vue.Pdata.type = ret.company;
				inttype();
				if(ret.errcode == 0){
					$('.logo').css('background-image','url('+ret.data.logo_show+')');
					sdata.logo = ret.data.logo_show;
					sdata.zhizhao = ret.data.zhizhao_show;
					sdata.citystr = ret.data.citystr;
					sdata.citycode = ret.data.citycode;
					$('#addImg').hide();
					if (ret.data.company_id) {
						sdata.company_id = ret.data.company_id;
						$.each( ret.company , function(i, n){
							if(n.id == ret.data.company_id){
								$('#company').val(n.name);
								return;
							}
						});
					}
				}
			});
		};

		lanYun.newVue('#vue',{
			seLxy:1,
			logo:'../../../image/main3/add_img.png',
			rzImg:'../../../image/main0/ruzhu.jpg',
			Pdata:{
				type:[],
			}
		},function() {
			_page.getData(2);
		});

		// 分公司数据处理
		inttype = function () {
			$.each( lanYun.vue.Pdata.type , function(i, n){
				var item = {};
				item.type = i ;
				item.id = n.id ;
				item.name = n.name ;
				typeData.push(item);
			});
		}

		// 上传图片
		fnUploadPic = function(tis) {
			$('input').blur();
			lanYun.getPermission(['camera','photos']);
			var dst = tis.dataset;
			if(ajax == 1){return;}
			ajax = 1;
			api.actionSheet({buttons: ['拍照', '相册选取'],style: {fontNormalColor: '#333',fontPressColor: '#333'}}, function(ret, err) {
				ajax = 0;
				if (ret.buttonIndex == 3)return false;
				var souType = 'album'; //相机
				if (ret.buttonIndex == 1)souType = 'camera';
				api.getPicture({sourceType: souType,mediaValue: 'pic',destinationType: 'url',quality: 80,allowEdit: true,}, function(ret, err) {
					if (ret && ret.data) {
						fnUploadOos(ret.data,dst.type);
					}
				});
			});
		};

		//上传到对象存储服务器
		function fnUploadOos(path,type){
			if(!path){
				lanYun.toast('请选择上传文件!');
				return;
			}
			if(!oosinfo){
				lanYun.toast('网路访问超时请重试');
				return;
			}
			upfile(path,type);
		};

		// 上传图片
		function upfile(path,type){
			var ext = lanYun.getFileExt(path);
			var file = oosinfo.key+lanYun.randStr(10)+ext;
			var urlFile = oosinfo.url+'/'+file;
			lanYun.showProgress({type:2});
			api.ajax({url: oosinfo.url,method: 'post',data: {values:{key: file,OSSAccessKeyId: oosinfo.OSSAccessKeyId,success_action_status: oosinfo.success_action_status,policy:oosinfo.policy,signature: oosinfo.signature},files: {file:path}}}, function(ret, err) {
				lanYun.hideProgress();
				if(err && err.statusCode == 200){
					if(type == 'upzhizhao'){
						$('#addImg').before('<div class="img-one bgpic " data-img="'+ urlFile +'" style="background-image:url('+ path +');"><div class="del" tapmode onclick="delImages(this)"></div></div>');
						sdata.zhizhao = urlFile;
						if($('.img-one').length >= 1){$('#addImg').hide();}
					}
					if(type == 'uplogo'){
						$('.logo').css('background-image','url('+path+')');
						sdata.logo = urlFile;
					}
					lanYun.toast('上传成功');
				}else{
					lanYun.toast('上传失败!');
				}
			});
		};

		// 删除图片
		delImages = function(tis){
			var dst = tis.dataset;
			$(tis).parent().remove();
			lanYun.vue.zhizhao = "";
			if($('.img-one').length <= 3){
				$('#addImg').show();
			}
		};

		//选择分公司
		tabWay = function(){
			$('input').blur();
			//console.log(JSON.stringify(typeData));
			if(typeData.length <= 0){
				lanYun.toast('无分公司信息');
				return;
			}
			lanYun.actionSelect({
				col:1,
				data:typeData,
				title:'请选择分公司',
				successCall:function(result){
					if(result && result.eventType == 'ok' && result.selectedInfo){
						var result_data = result.selectedInfo[0];
						$('#company').val(result_data.name);
						sdata.company_id = result_data.id;
					}
				}
			});
		};

		// 提交数据
	    upAllData = function() {

	        sdata.title = $('#title').val();
	        sdata.fzname = $('#fzname').val();
			sdata.phone = $('#phone').val();
	        sdata.address = $('#address').val();

			if(!sdata.logo){
	            lanYun.toast('请上传logo');
	            return;
	        }
			if(!sdata.title){
	            lanYun.toast('请填写商家名称');
	            return;
	        }
			if(!sdata.fzname){
	            lanYun.toast('请填写收货人姓名');
	            return;
	        }
	        if(!sdata.phone) {
	            lanYun.toast('请填写联系方式');
	            return;
	        }
	        if(!TOOL.check.isMobile(sdata.phone)) {
	            lanYun.toast('请输入正确的联系方式');
	            return;
	        }
	        if(!sdata.citystr){
	            lanYun.toast('请选择所在地区');
	            return;
	        }
	        if(!sdata.address){
	            lanYun.toast('请填写详细地址');
	            return;
	        }
			if(!sdata.zhizhao){
	            lanYun.toast('请上传营业执照');
	            return;
	        }
			if(!lanYun.vue.seLxy){
	            lanYun.toast('请阅读入驻协议');
	            return;
	        }
			//console.log(JSON.stringify(sdata));
	        lanYun.post( 'UserStoreIn/add', {data:sdata} , function(ret) {
				lanYun.toast(ret.msg);
	            if(ret.errcode == 0){
					lanYun.event("upuser");
					setTimeout(function(){
						api.closeToWin({name: 'root',animation:{subType:"from_left",duration:300}});
					},800)
	            }
	        },2);
	    };

		//同意协议
		seLxieyi = function(tis){
			if($(tis).hasClass('on')){
				$(tis).removeClass('on');
				lanYun.vue.seLxy = 0;
			}else {
				$(tis).addClass('on');
				lanYun.vue.seLxy = 1;
			}
		}

		//选择区域
		cityClick = function (tis) {
			$('input').blur();
			var Citys = lanYun.getStorage("cityData");
			//console.log(JSON.stringify(Citys));
			var UIActionSelector = api.require('UIActionSelector');
			UIActionSelector.open({
				datas:Citys,
				iPhoneXBottomHeight:0,
				lineColor:'#EBEBEB',
				layout:{row:6,col:3,height:30,size:15,sizeActive:15,rowSpacing:5,colSpacing:10,maskBg:'rgba(0,0,0,0.2)',
				bg:'#fff',color:'#999',colorActive:'#333333',colorSelected:'#333333',leftMargin:15,rightMargin:15,},
				animation : true,
				cancel:{text:'取消',size:15,w:50,h:35,bg:'none',bgActive:'none',color:'#333333',colorActive:'#333333'},
				ok : {text:'确定',size:15,w:50,h:35,bg:'none',bgActive:'none',color:'#333333',colorActive:'#333333'},
				title:{text:'',size:12,h:44,bg:'#fff',color:'#888'},
				actives:sdata.id,
			}, function(ret, err){
				//console.log(JSON.stringify(ret));
				if (ret.eventType == 'ok') {
					sdata.citystr = ret.level1 +'/'+ ret.level2 +'/'+  ret.level3;
					$('#citystr').val(sdata.citystr);
					sdata.citycode = [];
					// sdata.quindex = [];
					$.each(ret.selectedInfo, function(k,v){
						sdata.citycode.push(v.code);
						// sdata.quindex.push(v.id);
					});
					var data = sdata.citycode;
					sdata.citycode = data.join("/");
					//console.log(sdata.quid);
				}
			});
		}

		//打开协议
		open_page = function (tis) {
			var dst = tis.dataset;
			lanYun.openWin(dst.url, {
				win:'win',
				title:dst.title,
				frameParam : dst
		   });
		}

		//审核结果
		topMenuClick = function () {
			lanYun.openWin('main3/ruzhu/shenhe.html', {
				win:'win',
				border:1,
				title:"入驻审核",
				frameParam : {}
		   });
		}

	});
</script>
